<template>
	<div class="CompontensViews">
		<div class="right-content-title">
			<div class="left-select">
				<div class="selectView">
					<!-- 装置 -->
					<div class="selectViewLabel" v-show="styleOptionsValue == 2">
						{{ $t("message.bhView.leftComponents.device") }}：
					</div>
					<el-select style="margin: 0 17px 0 0" v-show="styleOptionsValue == 2" v-model="valuePlant"
						:placeholder="$t('message.bhView.label.placeholderSearch')
							" class="select-ipt long-select-ipt plant-ipt" @change="changePlant()">
						<el-option v-for="item in plantOptions" :key="item.pltCode" :label="item.pltName"
							:value="item.pltCode"></el-option>
					</el-select>
					<!-- 显示样式 -->
					<el-button size="mini" style="height: 24px;line-height: 0;font-size: 14px;" class="select-btn"
						type="primary" v-if="styleOptionsValue == 2" @click="
							((styleOptionsValue = 3), (show3dView = false)),
							ChangeStyle()
							">
						{{ $t("message.styleOptions.value3") }}
					</el-button>
					<el-button size="mini" style="height: 24px;line-height: 0;font-size: 14px;" type="primary"
						class="select-btn" v-if="styleOptionsValue == 3" @click="
							((styleOptionsValue = 2), (show3dView = false)),
							ChangeStyle()
							">
						{{ $t("message.styleOptions.value1") }}
					</el-button>
					<!-- 分类 -->
					<div class="selectViewLabel" style="margin: 0 0 0 24px" v-if="styleOptionsValue == 2">
						{{ $t("message.bhView.label.classification") }}
					</div>
					<!-- 123132 -->
					<el-select v-if="styleOptionsValue == 2" v-model="macType"
						:placeholder="$t('message.bhView.label.classification')" class="select-ipt"
						style="margin: 0 24px 0 0" @change="$store.state.macType = macType,
							getOfferHeaderApi()
							">
						<el-option v-for="item in macTypeList" :key="item.macType" :label="item.macTypeName"
							:value="item.macType"></el-option>
					</el-select>

					<!-- 机器编号select -->
					<el-select v-if="styleOptionsValue != 2" v-model="machineNumberValue" :placeholder="$t('message.bhView.label.placeholderSearch')
						" class="select-ipt long-ipt" @change="selectItem">
						<el-option v-for="item in machineNumber" :key="item.label" :label="item.label"
							:value="item.label"></el-option>
					</el-select>
					<!-- 机器一组个数 -->
					<div class="number-box" v-if="styleOptionsValue != 2">
						{{ machineNumberView }}
					</div>

					<!-- 腐蚀率、测定部位、 -->
					<div class="selectView" v-if="styleOptionsValue == 2">
						<div class="selectViewLabel">
							{{ $t("message.selectLable.value1") }}
						</div>
						<el-select v-model="colorOptionsValueSelect" :placeholder="$t('message.bhView.label.placeholderSearch')
							" class="select-ipt style-ipt" @change="
								$store.commit(
									'changeReadColorOptionsValueSelect',
									colorOptionsValueSelect
								),
								getCorrColorDataApiTop(
									colorOptionsValueSelect
								),
								((judgValue = ''),
									$store.commit(
										'changeReadJudgValue',
										judgValue
									)),
								(legendListSelect = [])
								">
							<el-option v-for="item in colorOptionsTop" :key="item.key" :label="item.value"
								:value="item.key"></el-option>
						</el-select>
						<!-- 腐蚀率的值 -->
						<el-select style="margin-left: 8px" v-model="judgValue" :placeholder="$t('message.bhView.label.placeholderSearch')
							" class="select-ipt judgValue-ipt" @change="
								$store.commit('changeReadJudgValue', judgValue),
								getReadDataApi(
									styleOptionsValue,
									leftReadTabelRow.proCode,
									leftReadTabelRow.pltCode,
									macType,
									macNumb,
									ctgName,
									lawName,
									colorOptionsValueSelect,
									judgValue
								)
								">
							<el-option v-for="item in legendListSelect" :key="item.judg_sig + item.judg_crr"
								:label="item.name" :value="item.judg_sig + item.judg_crr"></el-option>
						</el-select>
					</div>
					<!-- 刷新 -->
					<el-tooltip class="item" effect="dark" :content="$t('message.public.refresh')" placement="top">
						<div v-if="styleOptionsValue == 2" class="refresh" @click="
							getReadDataApi(
								styleOptionsValue,
								leftReadTabelRow.proCode,
								leftReadTabelRow.pltCode,
								macType,
								macNumb,
								ctgName,
								lawName,
								colorOptionsValueSelect,
								judgValue
							)
							">
							<i class="iconfont" style="font-size: 17px;">&#xe81f;</i>
						</div>
					</el-tooltip>

					<div v-if="styleOptionsValue == 2" class="refresh" @click="on3dIconClick">
						<i :class="'iconfont ' + (!is3DModalEnable ? 'disable' : '')">&#xe8e5;</i>
					</div>
				</div>
			</div>
			<div class="right-select">
				<div class="select-legend" v-if="styleOptionsValue != 2">
					<el-select v-model="colorOptionsValue" :placeholder="$t('message.bhView.label.placeholderSearch')
						" class="select-legend--ipt" @change="colorOptionsChange">
						<el-option v-for="item in colorOptions" :key="item.key" :label="item.value" :value="item.key">
						</el-option>
					</el-select>
				</div>

				<el-button class="bg-bottom-btn" style="margin-left: 10px;"
					:class="$store.state.btn_set_BHView ? '' : 'red'"
					:type="$store.state.btn_set_BHView ? 'primary' : ''" @click="showRetrievalBtn">
					{{ $t("message.planView.btn.btn_set") }}
				</el-button>
				<el-button class="bg-bottom-btn" style="margin-right: 10px;" @click="clearRetrievalBtn">
					Clear
				</el-button>
				<div class="select-legend-color-view" v-if="styleOptionsValue != 2">
					<div class="select-legend-color" v-for="Item in legendList" :key="Item.color">
						<div class="select-legend-color-box" :style="`background:${Item.color}`"></div>
						<div class="select-legend-color-label" style="white-space: nowrap;">
							{{ Item.name }}
						</div>
					</div>
				</div>
				<!-- v-if="colorOptionsValue == ''" -->
				<!--  -->
				<span class="messageColor"
					:style="{ transform: colorOptionsValue == '' ? '' : 'translateX(-116px) translateY(-52px)' }">{{
						$t("message.calculationRules.value1")
					}}<span v-if="CalculationRules.longTerm == 1">{{ $t("message.calculationRules.value2")
						}}<span v-if="CalculationRules.shortTerm == 1 ||
							CalculationRules.regression == 1
						">
							/
						</span></span><span v-if="CalculationRules.shortTerm == 1">{{
							$t("message.calculationRules.value3")
						}}<span v-if="CalculationRules.regression == 1">
							/
						</span> </span><span v-if="CalculationRules.regression == 1">{{
							$t("message.calculationRules.value4")
						}}</span></span>
			</div>
		</div>
		<!-- CAD -->
		<!-- <div class="CadView"></div> -->
		<CadViewForReading class="CadView" ref="CadViewForReading" :leftReadTabelRow="leftReadTabelRow"
			:styleOptionsValue="styleOptionsValue" :colorOptionsValue="colorOptionsValue" :macType="macType"
			:macName="macName" :legendList="legendList" :defaultSelectLinNumb="defaultSelectLinNumb"
			@onLineGroupClick="onLineGroupClick" @onCadContextMenuClick="onCadContextMenuClick"
			v-show="styleOptionsValue == 1 || styleOptionsValue == 3" />

		<!-- Tabel -->
		<ReadingTabel ref="ReadingTabel" :prposTabelData="prposTabelData" :loading="loading" :tableHeight="tableHeight"
			:category="category" :statute="statute" style="margin-top: 10px" @getReadTabelRow="getReadTabelRow"
			@onContextMenuClick="onContextMenuClick" @SearchReadTable="SearchReadTable" :ConfigObject="ConfigObject"
			:tableSearchData="tableSearchData" v-if="loadFlag && styleOptionsValue == 2" :empty="empty"></ReadingTabel>
		<div class="tabel-footer" v-if="loadFlag && styleOptionsValue == 2">
			<!-- {{ $t("message.bhView.WallThicknessPattern.number") }} -->
			{{ tableNumber }}
			<!-- {{ $t("message.bhView.WallThicknessPattern.piece") }} -->
		</div>

		<transition name="slide-fade">
			<div v-if="show3dView && loadFlag && styleOptionsValue == 2" class="scene-lay">
				<ThreeDScene class="three-view" ref="threeView" :readTabelRow="readTabelRow"
					@on3dElementClick="on3dElementClick" @onCloseClick="on3dIconClick"
					:defaultBgColor="defaultThreedBgColor" />
			</div>
		</transition>

		<RetrievalView ref="RetrievalView" class="plan-c" @showRetrievalBtn="showRetrievalBtn"
			:styleOptionsValue="styleOptionsValue"></RetrievalView>
	</div>
</template>

<script>
import ReadingTabel from "./ReadingTabel";
import {
	getCorrColorData,
	getCorrData,
	getReadData,
	getListBox,
	getReadTabScreen,
	getOfferHeader,
	getPlant,
	getReadHeaderData,
	getDataByMacName,
	getCalculRules,
	getTotDimensInteractive,
	getOfferHeaderObjctl
} from "../../api/api";
import CadViewForReading from "./CadViewForReading";
import { getLocalStorage } from "../../utils/storage";
import eventBus from "../../eventBus/bus";
import $ from "jquery";
import ThreeDScene from "../ThreeDScene/readingThreeDScene";
import RetrievalView from './Retrieval/index.vue';

export default {
	// 模块名字
	name: "Reading",
	props: {
		leftReadTabelRow: Object,
		macName: String,
	},
	// 模块数据
	data() {
		//数据
		return {
			getReadDataFlg: 0,
			// 显示样式
			styleOptions: [
				// {
				//   value: "図面＋リスト",
				//   id: 1,
				// },
				{
					value: this.$t("message.styleOptions.value3"),
					id: 2,
				},
				{
					value: this.$t("message.styleOptions.value1"),
					id: 3,
				},
			],
			macTypeList: [
				{
					macType: 0,
					macTypeName: "ALL",
				},
				{
					macType: 1,
					macTypeName: this.$t(
						"message.bhView.leftComponents.machine"
					),
				},
				{
					macType: 2,
					macTypeName: this.$t(
						"message.bhView.leftComponents.piping"
					),
				},
			],
			machineNumber: [],
			machineNumberValue: "",
			machineNumberKey: "",

			machineNumberView: 0,
			macType: 0,
			styleOptionsValue: 3,
			colorOptions: [],
			colorOptionsTop: [],
			legendList: [],
			colorOptionsValue: null,
			prposTabelData: [],
			tableSearchData: {},
			macNumb: "",
			ctgName: "",
			lawName: "",
			loading: false,
			loadFlag: false,
			tableHeight: 350,
			readTabelRow: {},
			CalculationRules: {},

			showDoActionAfterChange: true,
			ConfigObject: {
				macNumb: {
					isShow: false,
					width: 0,
					isFlex: false,
				},
				macName: {
					isShow: false,
					width: 0,
					isFlex: false,
				},
				ctgName: {
					isShow: false,
					width: 0,
					isFlex: false,
				},
				clName: {
					isShow: false,
					width: 0,
					isFlex: false,
				},
				macFrom: {
					isShow: false,
					width: 0,
					isFlex: false,
				},
				macTo: {
					isShow: false,
					width: 0,
					isFlex: false,
				},
				lawName: {
					isShow: false,
					width: 0,
					isFlex: false,
				},
				makDate: {
					isShow: false,
					width: 0,
					isFlex: false,
				},
				mkrName: {
					isShow: false,
					width: 0,
					isFlex: false,
				},
				impName: {
					isShow: false,
					width: 0,
					isFlex: false,
				},
				stName: {
					isShow: false,
					width: 0,
					isFlex: false,
				},
				fncName: {
					isShow: false,
					width: 0,
					isFlex: false,
				},
				flwClsName: {
					isShow: false,
					width: 0,
					isFlex: false,
				},
				flwName: {
					isShow: false,
					width: 0,
					isFlex: false,
				},
				useCase: {
					isShow: false,
					width: 0,
					isFlex: false,
				},
				cr: {
					isShow: false,
					width: 0,
					isFlex: false,
				},
				rl: {
					isShow: false,
					width: 0,
					isFlex: false,
				},
				rt: {
					isShow: false,
					width: 0,
					isFlex: false,
				},
			},
			category: [],
			statute: [],
			userName: getLocalStorage("userName"),

			plantOptions: [],
			valuePlant: "",
			colorOptionsValueSelect: "",

			legendListSelect: [],
			judgValue: "",
			tableNumber: '',

			// 图纸中默认选择的线组
			defaultSelectLinNumb: -1,

			empty: "",

			show3dView: false,

			is3DModalEnable: false,

			defaultThreedBgColor: [255, 251, 191],

			selectMacNumb: this.$store.state.macNameb,
			selectMacName: this.$store.state.macName,
			showRetrievalFlg: false

		};
	},
	components: {
		ReadingTabel,
		CadViewForReading,
		ThreeDScene,
		RetrievalView
	},
	watch: {
		leftReadTabelRow: {
			deep: true,
			immediate: true,
			handler: function (newV, oldV) {
				// 左侧列表选中更新  先清空下拉机器信息
				this.machineNumber = [];
				this.machineNumberValue = "";

				if (newV == null) {
					return;
				} else if (
					JSON.stringify(newV) === JSON.stringify(oldV) ||
					this.styleOptionsValue == 3
				) {
					return;
				}

				this.getReadDataApi(
					this.styleOptionsValue,
					newV.proCode,
					newV.pltCode,
					this.macType,
					this.macNumb,
					this.ctgName,
					this.lawName,
					this.colorOptionsValueSelect,
					this.judgValue
				);
			},
		},
	},
	methods: {
		//右侧筛选
		showRetrievalBtn() {
			this.showRetrievalFlg = !this.showRetrievalFlg;
			this.showRoHiddenRetrieva(this.showRetrievalFlg);
		},
		clearRetrievalBtn() {
			this.$refs.RetrievalView.delCodSourceByUserApi();
		},
		showRoHiddenRetrieva(flg) {
			if (flg) {
				$('.plan-c').css('right', '10px');
				// 通知第一次显示
				this.$refs.RetrievalView.initFn(true);
			} else {
				$('.plan-c').css('right', '-560px');
			}
		},
		//切换布局方式 图纸  -  2 列表  - 3 图纸
		ChangeStyle() {
			eventBus.$emit("selectViewValueFun", this.styleOptionsValue);
			this.$emit("ChangeSelectViewValue", this.styleOptionsValue);
			this.$store.commit("changeRDStyleCode", this.styleOptionsValue);
			this.valuePlant = this.$store.state.pltCode;
			if (this.styleOptionsValue == 1) {
				// this.tableHeight = 350;
				// $(".CadView").height(
				//   $(".CompontensViews").height() - 50 - this.tableHeight
				// );
				// this.$refs.CadViewForReading.loadSvg();
				// this.getOfferHeaderApi();
			} else if (this.styleOptionsValue == 2) {
				this.prposTabelData = [];
				this.tableHeight = $(".CompontensViews").height() - 94;
				this.getOfferHeaderApi();
				this.getReadHeaderDataApi(
					this.leftReadTabelRow.proCode,
					this.valuePlant
				);
			} else if (this.styleOptionsValue == 3) {
				eventBus.$emit("modifyPltCode", this.valuePlant);
				$(".CadView").height($(".CompontensViews").height() - 56);
				this.$refs.CadViewForReading.loadSvg();
			}
		},
		//获取图纸球标等颜色信息
		getCorrColorDataApi(colorOptionsValue) {
			let dataJson = {
				corrCode: colorOptionsValue || '206',
			};
			getCorrColorData(dataJson).then((res) => {
				this.legendList = [];
				if (res.data.code != 0) {
					return;
				}
				this.legendList = res.data.data;
			});
		},
		//获取腐蚀率 余寿命等
		getCorrDataApi() {
			let dataJson = {
				Type: 1,
			};
			getCorrData(dataJson).then((res) => {
				if (res.data.code != 0) {
					this.colorOptions = [];
					this.colorOptionsTop = [];
					return;
				}
				this.colorOptions = res.data.data;
				this.colorOptionsValue = this.colorOptions[0].key;
			});
		},
		// 腐蚀率改变
		colorOptionsChange() {
			if (this.colorOptionsValue != '') {
				this.showRetrievalFlg = false;
				this.showRoHiddenRetrieva(this.showRetrievalFlg);
			}

			this.$store.commit(
				"changeReadColorOptionsValue",
				this.colorOptionsValue
			);
			console.log(
				"this.colorOptionsValue",
				this.colorOptionsValue,
				this.$store.state.readColorOptionsValue
			);
			this.getCorrColorDataApi(
				this.colorOptionsValue == "" ? "0" : this.colorOptionsValue
			);
		},
		//获取阅览表格
		getReadDataApi(
			type,
			proCode,
			pltCode,
			macType,
			macNumb,
			ctgName,
			lawName,
			CorrCode,
			CorrJudg
		) {
			this.getReadDataFlg++
			if (this.getReadDataFlg != 1) {
				return
			}
			setTimeout(() => {
				this.getReadDataFlg = 0;
			}, 500);

			this.prposTabelData = [];
			let dataJson = {
				type: 2,
				proCode: proCode,
				pltCode: pltCode || this.$store.state.pltCode,//?????
				macNumb: macNumb,
				macType: macType,
				ctgName: ctgName,
				lawName: lawName,
				CorrCode: parseInt(CorrCode),
				CorrJudg: CorrJudg,
				pageIndex: 1,
				pageSize: 100000,
				account: getLocalStorage('userName')
			};
			this.loading = true;
			getReadData(dataJson).then((res) => {
				this.loading = false;
				this.tableNumber = res.data.msg;
				if (res.data.code == 1) {
					if (this.loadFlag && this.styleOptionsValue == 2) {
						this.$alert(res.data.data, '', {
							confirmButtonText: 'OK',
							type: 'warning',
						});
					}
					return
				}
				!res.data.data ? (this.empty = "No Data") : (this.empty = "");
				if (res.data.code == -1) {
					this.prposTabelData = [];
					this.$alert(res.data.msg, '', {
						confirmButtonText: 'OK',
						type: 'warning',
					});
					return;
				}
				if (res == null || res.data == null || res.data.code != 0) {
					this.prposTabelData = [];
					return;
				}
				this.$emit("getNumberData", res.data.count);
				this.prposTabelData = res.data.data;
			});
			// .finally(() => {
			//   this.loading = false;
			// });
		},
		//获取一行信息
		getReadTabelRow(row) {
			this.readTabelRow = row;
			this.$emit("changeRadioSelect", row.macType);
			let tempRow = JSON.parse(JSON.stringify(row))
			tempRow.macCode = tempRow.dmgCode;
			this.$emit("getMacName", tempRow);
			if (this.showDoActionAfterChange)
				this.$refs.CadViewForReading.onTableItemSelect(row);
			if (this.styleOptionsValue == 1 || this.styleOptionsValue == 3) {
				if (this.showDoActionAfterChange)
					this.getListBoxApi(
						this.readTabelRow.proCode,
						this.readTabelRow.linNumb1,
						this.readTabelRow.pltCode
					);
			} else if (this.styleOptionsValue == 2) {
				// console.log();
			}

			if (!this.showDoActionAfterChange) {
				this.showDoActionAfterChange = true;
			}

			this.requireSelectLineGroup(false);
			this.toSelect3dElement(row);
			this.getThreeNumberList(row.dmgCode)
		},
		//获取 组下的机器下拉列表(下拉列表)
		getListBoxApi(proCode, linNumb, inPltCode) {
			if (!linNumb) {
				return
			}
			let dataJson = {
				proCode: proCode,
				linNumb: linNumb,
				pltCode: inPltCode,
			};
			getListBox(dataJson).then((res) => {
				if (res.data.code != 0) {
					this.machineNumberView = 0;
					this.machineNumber = [];
					return;
				}
				this.machineNumber = res.data.data;
				this.machineNumberView = res.data.data.length;
				this.showDoActionAfterChange = false;

				let tempItem = this.machineNumber[0];

				this.machineNumber.forEach((element) => {
					if (
						element.macNumb == this.selectMacNumb &&
						element.macName == this.selectMacName
					) {
						tempItem = element;
					}
				});

				this.machineNumberValue = tempItem.label;
				this.machineNumberKey = tempItem.key;

				if (this.$refs.ReadingTabel) {
					this.$refs.ReadingTabel.setCurrentByNameAndNumb(
						tempItem.macName,
						tempItem.macNumb
					);
				}

				this.$emit("getMacName", tempItem);
				this.getThreeNumberList(tempItem.macCode)
			});
			// .finally(() => {
			//   // this.machineNumberValue = "";
			// });
		},
		onLineGroupClick(e) {
			// this.$refs.ReadingTabel.setCurrentByR(e.prlNo);
			if (e == null) {
				this.machineNumber = [];
				this.machineNumberValue = "";
				this.machineNumberKey = "";
				this.machineNumberView = 0;
				this.$emit("getMacName", {});
			} else {
				this.getListBoxApi(
					this.leftReadTabelRow.proCode,
					e.prlNo,
					this.leftReadTabelRow.pltCode
				);
			}
		},

		/**
		 * 图纸右键菜单响应
		 */
		onCadContextMenuClick(e) {
			let prlNo = e.prlNo;
			let tag = e.tag;

			if (this.machineNumberKey.length == 0) {
				return
			}

			console.log(
				"onCadContextMenuClick : prlNo = " + prlNo + " tag = " + tag
			);
			console.log(this.readTabelRow);

			if (tag === "draw-style") {
				// if (this.machineNumberKey != "") {
				var { href } = this.$router.resolve({
					name: "CAD1",
					query: {
						id: this.machineNumberKey,
						dmgCode: this.machineNumber[0].dmgCode,
						pltCode: this.$store.state.pltCode,
					},
				});

				let newWindow = window.open(href, "_blank");

			} else if (tag === "fit-draw") {
				this.$refs.CadViewForReading.onContextMenuClick(e);
			} else {
				this.readTabelRow.pltCode = this.leftReadTabelRow.pltCode;
				this.$parent.changeByReadingSvg(e.tag, this.readTabelRow);
			}
		},

		onContextMenuClick(e) {
			console.log(e);
			this.onCadContextMenuClick({
				prlNo: this.readTabelRow.linNumb1,
				tag: e.tag,
			});
		},

		onMenuClickFromExternal(inTag) {
			if (this.styleOptionsValue == 1 || this.styleOptionsValue == 2) {
				// let selectRow = this.$refs.getSelectRowData();
				this.onCadContextMenuClick({
					tag: inTag,
					prlNo: this.readTabelRow.linNumb1,
				});
			} else {
				this.onCadContextMenuClick({
					tag: inTag,
					prlNo: this.$refs.CadViewForReading.getSelectLineGroupPrlNo(),
				});
			}
		},

		selectItem() {
			if (this.machineNumber.length == 0) {
				this.$emit("getMacName", {});
				return;
			}
			this.machineNumber.forEach((item) => {
				if (item.label == this.machineNumberValue) {
					this.machineNumberKey = item.key;
					this.$emit("getMacName", item);
					this.showDoActionAfterChange = false;
					if (this.$refs.ReadingTabel) {
						this.$refs.ReadingTabel.setCurrentByNameAndNumb(
							item.macName,
							item.macNumb
						);
					}

					this.getThreeNumberList(item.macCode)
				}
			});
		},
		//阅览表格类别、试用法规
		getReadTabScreenApi(
			readTabScreenType,
			type,
			proCode,
			pltCode,
			macType
		) {
			let dataJson = {
				readTabScreenType: readTabScreenType,
				type: type,
				proCode: proCode,
				pltCode: pltCode,
				macType: macType,
			};
			getReadTabScreen(dataJson)
				.then((res) => {
					if (res.data.code != 0) {
						this.category = [];
						this.statute = [];
						return;
					}
					if (readTabScreenType == 1) {
						this.category = res.data.data;
					} else if (readTabScreenType == 2) {
						this.statute = res.data.data;
					}
				})
				.catch(() => {
					this.category = [];
					this.statute = [];
				});
		},
		async getOfferHeaderObjctlApi(Num) {
			let dataJson =
			//  {
			// 	type: 2,
			// 	cntlName: "Spread2",
			// 	formID: "AM33000",
			// 	language: parseInt(getLocalStorage("lang") == "1" ? 2 : 1),
			// };
			{
				language: parseInt(getLocalStorage("lang") == "1" ? 2 : 1),
				"formID": "AM11100",
				"cntlName": "Spread",
				MacType: this.macType
			}
			let res = await getOfferHeaderObjctl(dataJson);
			return res.data.data;
		},
		//获取表格配置数据
		getOfferHeaderApi() {
			let dataJson = {
				type: 4,
				account: this.userName,
				formID: "AM11100",
				MacType: this.macType
			};
			getOfferHeader(dataJson).then(async (res) => {
				this.loadFlag = true;
				if (res.data.code != 0) {
					return;
				}
				this.ConfigObject = res.data.data;

				let titles = await this.getOfferHeaderObjctlApi();
				Object.keys(this.ConfigObject).forEach((item, index) => {
					this.ConfigObject[item].title = titles[index];
				})

				this.getReadDataApi(
					this.styleOptionsValue,
					this.leftReadTabelRow.proCode,
					this.valuePlant,
					this.macType,
					this.macNumb,
					this.ctgName,
					this.lawName,
					this.colorOptionsValueSelect,
					this.judgValue
				);
				this.loadFlag = true;
			});
			// .finally(() => {
			//   this.loadFlag = true;
			// });
		},
		//获取表头筛选条件
		getReadHeaderDataApi(proCode, pltCode) {
			let dataJson = {
				proCode: proCode,
				pltCode: pltCode,
			};
			getReadHeaderData(dataJson).then((res) => {
				this.tableSearchData = {};
				if (res.data.code != 0) {
					return;
				}
				this.tableSearchData = res.data.data;
			});
		},
		//筛选表格
		SearchReadTable(searchData) {
			this.macNumb = searchData.macNumbValue;
			this.ctgName = searchData.macType;
			this.lawName = searchData.lawValue;
			this.getReadDataApi(
				this.styleOptionsValue,
				this.leftReadTabelRow.proCode,
				this.leftReadTabelRow.pltCode,
				this.macType,
				this.macNumb,
				this.ctgName,
				this.lawName,
				this.colorOptionsValueSelect,
				this.judgValue
			);
		},
		changePlant() {
			this.$store.commit("changePltCode", this.valuePlant);
			eventBus.$emit("modifyPltCode", this.valuePlant);
			this.plantOptions.forEach((Item) => {
				if (Item.pltCode == this.valuePlant) {
					let valuePlant = Item.pltName;
					this.$store.commit("changePlantName", valuePlant);
				}
			});
			setTimeout(() => {
				this.getReadDataApi(
					this.styleOptionsValue,
					this.leftReadTabelRow.proCode,
					this.valuePlant,
					this.macType,
					this.macNumb,
					this.ctgName,
					this.lawName,
					this.colorOptionsValueSelect,
					this.judgValue
				);
			}, 300);
		},
		//获取腐蚀率的值
		getCorrColorDataApiTop(colorOptionsValueSelect) {
			let dataJson = {
				corrCode: colorOptionsValueSelect || '206',
				type: 1,
				IsSearchCorr: "true",
			};
			getCorrColorData(dataJson).then((res) => {
				this.legendListSelect = [];
				if (res.data.code != 0) {
					return;
				}
				this.legendListSelect = res.data.data;
				if (this.styleOptionsValue != 2) {
					return;
				}
				this.getReadDataApi(
					this.styleOptionsValue,
					this.leftReadTabelRow.proCode,
					this.valuePlant,
					this.macType,
					this.macNumb,
					this.ctgName,
					this.lawName,
					this.colorOptionsValueSelect,
					this.judgValue
				);
			});
		},

		/**
		 * 根据右侧菜单选中项
		 */
		requireSelectLineGroup(changePro = true) {
			// getDataByDmgCode({
			//   dmgCode: this.$store.state.macCode,
			// })
			getDataByMacName({
				macName: this.$store.state.macName,
				dmgCode: this.$store.state.macCode,
			}).then((res) => {
				console.log("requireSelectLineGroup");
				console.log(res);
				this.mountedFun();

				if (res.data.code == "0") {
					if (changePro)
						eventBus.$emit(
							"changeReadingLeftTableSelectCode",
							res.data.data.proCode
						);
					// eventBus.$emit("changeReadingSelectLinNumb",res.data.data.linNumb );
					this.defaultSelectLinNumb = res.data.data.linNumb;
				} else {
					if (changePro)
						eventBus.$emit("changeReadingLeftTableSelectCode", -1);
					// eventBus.$emit("changeReadingSelectLinNumb",res.data.data.linNumb );
					this.defaultSelectLinNumb = -2;
				}
			});
		},

		mountedFun() {
			let _this = this;
			eventBus.$on("LoadReadingTabelData", function () {
				_this.getOfferHeaderApi();
			});
			eventBus.$emit("selectViewValueFun", 1);
			this.$nextTick(function () {
				$(".CadView").height(
					$(".CompontensViews").height() - 56,
					function () {
						// _this.$refs.CadViewForReading.loadSvg(); // 无效代码
					}
				);

				let dataJson2 = {
					pltCode: 0,
					platName: "",
					pageIndex: 1,
					pageSize: 1000,
				};
				getPlant(dataJson2).then((res) => {
					this.plantOptions = [];
					if (res.data.code != 0) {
						this.valuePlant = null;
						this.$store.commit("changePltCode", null);
						return;
					}
					this.plantOptions = res.data.data;

					let filterFlg = this.plantOptions.filter(item => item.pltCode == this.$store.state.pltCode);
					//  如果有选择过装置 ---添加为记忆选项
					if (this.$store.state.pltCode && filterFlg.length > 0) {
						// if (this.$store.state.pltCode) {
						this.valuePlant = this.$store.state.pltCode;
					} else {
						this.valuePlant = this.plantOptions[0].pltCode;
						this.$store.commit("changePltCode", this.valuePlant);
					}

				});
			});
			this.$emit("ChangeSelectViewValue", this.styleOptionsValue);
		},

		on3dIconClick() {
			if (!this.is3DModalEnable)
				return;

			this.show3dView = !this.show3dView;
			// if (this.$refs.threeView) {
			// 	this.$refs.threeView.onSelectDataFromExternal(inData);
			// }
		},

		on3dElementClick(inId) {
			if (this.$refs.ReadingTabel) {
				this.$refs.ReadingTabel.setCurrentByIndex(inId);
			}
		},

		toSelect3dElement(inData) {
			if (this.$refs.threeView) {
				this.$refs.threeView.onSelectDataFromExternal(inData);
			}
		},

		getThreeNumberList(inDmgCode) {
			this.is3DModalEnable = false;
			if (inDmgCode == null) {
				return;
			}
			getTotDimensInteractive({
				dmgCode: inDmgCode,
			}).then((res) => {
				if (res.data.code == 0 && res.data.data && res.data.data.length > 0) {
					this.is3DModalEnable = true;
				} else {
					this.is3DModalEnable = false;
				}
			});
		},
	},
	created() {
		this.judgValue = this.$store.state.readJudgValue;
		getCalculRules().then((res) => {
			this.CalculationRules = res.data.data;
		});
		let dataJson = {
			Type: 1,
		};
		this.$nextTick(function () {
			let dataJson = {
				type: 4,
				account: this.userName,
				formID: "AM11100",
			};
			getOfferHeader(dataJson).then((res) => {
				this.loadFlag = true;
				if (res.data.code != 0) {
					return;
				}
				this.ConfigObject = res.data.data;
				this.loadFlag = true;
			});
			// .finally(() => {
			//   this.loadFlag = true;
			// });
			this.tableHeight = $(".CompontensViews").height() - 94;
			//     $(".scene-lay").height($(".CompontensViews").height() - 94);
		});
		getCorrData(dataJson).then((res) => {
			if (res.data.code != 0) {
				this.colorOptions = [];
				this.colorOptionsTop = [];
				return;
			}
			this.colorOptions = res.data.data;
			// 默认colorOptionsValue值设定
			this.colorOptionsValue = this.$store.state.readColorOptionsValue;

			res.data.data.forEach((Element) => {
				if (Element.key) {
					this.colorOptionsTop.push(Element);
				}
			});
			this.$store.state.readColorOptionsValueSelect == ""
				? (this.colorOptionsValueSelect = this.colorOptionsTop[0].key)
				: (this.colorOptionsValueSelect =
					this.$store.state.readColorOptionsValueSelect);

			let dataJson = {
				corrCode: this.colorOptionsValueSelect || '206',
				type: 1,
				IsSearchCorr: "true",
			};
			getCorrColorData(dataJson).then((res) => {
				this.legendListSelect = [];
				if (res.data.code != 0) {
					return;
				}
				this.legendListSelect = res.data.data;
				if (this.styleOptionsValue != 2) {
					return;
				}
			});

			this.getCorrColorDataApi(
				this.colorOptionsValue == "" ? "0" : this.colorOptionsValue
			);
		});
	},
	mounted() {
		if (this.$store.state.macCode && this.$store.state.macCode >= 0) {
			this.requireSelectLineGroup();
		} else {
			this.mountedFun();
		}
		//记录当前页面样式
		this.styleOptionsValue = this.$store.state.rdStyleCode;
		if (this.styleOptionsValue == 2) {
			getCalculRules().then((res) => {
				this.getOfferHeaderApi();
				this.valuePlant = this.$store.state.pltCode;
				this.CalculationRules = res.data.data;
				this.getReadHeaderDataApi(
					this.leftReadTabelRow.proCode,
					this.valuePlant
				);
			});
		}
		// 如果处理系为空 清空数据
		let _this = this;
		eventBus.$on("ClearMachineNumberData", function () {
			_this.machineNumberView = 0;
			_this.machineNumber = [];
			_this.machineNumberValue = "";
		});
		eventBus.$on("isNoSvg", () => {
			this.styleOptionsValue = 2
			this.show3dView = false
			this.ChangeStyle()
		});

	},
	beforeDestroy() {
		eventBus.$off("LoadReadingTabelData");
		eventBus.$off("ClearMachineNumberData");
	},
};
</script>

<style lang="scss" scoped>
.CompontensViews {
	width: 100%;
	height: 100%;

	.right-content-title {
		padding: 12px 0 0 0;
		display: flex;
		align-items: center;
		justify-content: flex-start;

		.left-select {
			height: 32px;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.selectView {
				// margin-right: 24px;
				display: flex;
				align-items: center;
				justify-content: flex-start;

				.selectViewLabel {
					line-height: 32px;
					font-size: 14px;
					color: rgba(0, 0, 0, 0.65);
				}

				.select-btn {
					min-width: 100px;
					height: 24px;
					// background: #106ebe;
					// color: #fff;
					// border: 1px solid #eaeaeb;
					// border-radius: 4px;
					cursor: pointer;
				}

				.select-ipt {
					width: 112px;
					height: 24px;

					::v-deep .el-input__inner {
						width: 112px;
						height: 24px;
						color: rgba(0, 0, 0, 0.65);
						background: #fff;
					}

					::v-deep .el-input__icon {
						line-height: 24px;
					}
				}

				.long-select-ipt {
					width: 130px;

					::v-deep .el-input__inner {
						width: 130px;
					}
				}

				.plant-ipt {
					width: 197px;

					::v-deep .el-input__inner {
						width: 197px;
					}
				}

				.long-ipt {
					width: 256px;
					margin-left: 24px;

					::v-deep .el-input__inner {
						width: 256px;
					}
				}

				.style-ipt {
					width: 100px;

					// margin-left: 24px;
					::v-deep .el-input__inner {
						width: 100px;
					}
				}

				.judgValue-ipt {
					width: 120px;

					::v-deep .el-input__inner {
						width: 120px;
					}
				}

				.number-box {
					width: 28px;
					height: 24px;
					margin: 0 24px 0 12px;
					color: #565656;
					background: #f8f8f8;
					border-radius: 4px;
					text-align: center;
					line-height: 24px;
					border: 1px solid rgba(0, 0, 0, 0.15);
					padding: 0 4px;
				}
			}

			.refresh {
				margin-left: 24px;
				min-width: 40px;
				height: 24px;
				border-radius: 4px;
				border: 1px solid #d9d9d9;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;

				.iconfont {
					margin: 0 4px;
					color: #2a7190;
				}

				.disable {
					color: lightgray;
				}
			}
		}

		.right-select {
			height: 24px;
			display: flex;
			align-items: center;
			justify-content: flex-start;

			.bg-bottom-btn {
				height: 100%;
				// background: #106ebe;
				// color: #ffffff;
				padding: 0 12px;
				// font-size: 12px;

				&:nth-child(3) {
					// background-color: #FFF;
					// color: #000;
				}
			}

			.red {
				background-color: #bc000f;
				color: #FFF;
				border: 0;
			}

			.select-legend {
				height: 24px;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				margin-right: 24px;

				.select-legend--ipt {
					::v-deep .el-input__inner {
						width: 95px;
						height: 24px;
						color: rgba(0, 0, 0, 0.65);
					}

					::v-deep .el-input__icon {
						line-height: 24px;
					}
				}
			}

			.select-legend-color-view {
				// width: 636px;
				display: flex;
				align-items: center;
				justify-content: flex-start;
			}

			.select-legend-color {
				margin-right: 6px;
				height: 24px;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				min-width: 100px;
				position: relative;

				.select-legend-color-box {
					min-width: 24px;
					height: 24px;
					border-radius: 2px;
					border: 1px solid #d9d9d9;
					margin-right: 8px;
					cursor: pointer;
				}
			}

			.messageColor {
				margin-left: 8px;
				position: absolute;
				right: 16px;
			}
		}
	}

	.CadView {
		width: 100%;
		height: calc(100% - 0px);
		margin-top: 12px;
		background: #fff;
	}
}

::v-deep .el-table--border td,
::v-deep .el-table--border th,
::v-deep .el-table__body-wrapper .el-table--border.is-scrolling-left~.el-table__fixed {
	border-right: 0 none;
}

.tabel-footer {
	height: 38px;
	padding: 0 10px;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	background: rgb(245, 245, 245);
}

.scene-lay {
	position: absolute;
	width: calc((100% - 264px) / 2);
	height: calc(100% - 190px);
	right: 0px;
	bottom: 0px;
	z-index: 5;

	background-color: #106ebe;

	.three-view {
		width: 100%;
		height: 100%;
	}
}

/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
	transition: all 0.3s ease;
}

.slide-fade-leave-active {
	transition: all 0.3s cubic-bezier(1, 0.5, 0.8, 1);
}

.slide-fade-enter,
.slide-fade-leave-to

/* .slide-fade-leave-active for below version 2.1.8 */
	{
	transform: translateX(140px);
	opacity: 0;
}


.plan-c {
	position: fixed;
	width: 560px !important;
	height: calc(100% - 198px);
	background: #FFF;
	right: -560px;
	bottom: 0;
	z-index: 9999;
	transition: all 0.3s ease;
	border: 1px solid #C3C3C3;
}
</style>
